1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
"use client";
import {
StartOverlay,
StartCard,
SongTitleText,
SongArtistText,
StartBtn,
OpacityControl,
OpacityLabel,
OpacitySlider,
OpacityValue,
PreviewWrap,
PreviewBtn,
PreviewHint,
} from "../page.styles";
interface PreGameViewProps {
isReady: boolean;
loadingLrc: boolean;
songTitle: string;
songArtist: string;
audioUrl: string;
isVideo: boolean;
audioVolume: number;
setAudioVolume: (v: number) => void;
backgroundOpacity: number;
setBackgroundOpacity: (v: number) => void;
isPreviewPlaying: boolean;
onStart: () => void;
onPreviewToggle: () => void;
}
export default function PreGameView({
isReady,
loadingLrc,
songTitle,
songArtist,
audioUrl,
isVideo,
audioVolume,
setAudioVolume,
backgroundOpacity,
setBackgroundOpacity,
isPreviewPlaying,
onStart,
onPreviewToggle,
}: PreGameViewProps) {
return (
<StartOverlay>
<StartCard>
{!isReady ? (
<>
<SongTitleText>Loading...</SongTitleText>
<SongArtistText>Please wait while we load the chart</SongArtistText>
</>
) : (
<>
<SongTitleText>{loadingLrc ? "Loading..." : songTitle}</SongTitleText>
<SongArtistText>{songArtist}</SongArtistText>
</>
)}
<StartBtn onClick={onStart} disabled={!isReady} suppressHydrationWarning>
{loadingLrc ? "Loading song..." : "▶ Start Game"}
</StartBtn>
<OpacityControl>
<OpacityLabel>
Volume
<OpacityValue>{audioVolume}%</OpacityValue>
</OpacityLabel>
<OpacitySlider
type="range"
min="0"
max="100"
value={audioVolume}
onChange={(e) => setAudioVolume(Number(e.target.value))}
/>
</OpacityControl>
{isVideo && (
<OpacityControl>
<OpacityLabel>
Background opacity
<OpacityValue>{backgroundOpacity}%</OpacityValue>
</OpacityLabel>
<OpacitySlider
type="range"
min="0"
max="100"
value={backgroundOpacity}
onChange={(e) => setBackgroundOpacity(Number(e.target.value))}
/>
</OpacityControl>
)}
<PreviewWrap>
<PreviewBtn onClick={onPreviewToggle} disabled={!audioUrl} suppressHydrationWarning>
{isPreviewPlaying ? "⏸ Pause Preview" : "▶ Preview Audio"}
</PreviewBtn>
<PreviewHint>
{audioUrl
? "Use preview to test your volume before starting."
: "Load a chart to enable audio preview."}
</PreviewHint>
</PreviewWrap>
</StartCard>
</StartOverlay>
);
}
|
